<template>
  <div class="my-invite">
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img :src="item.local_img">
        <div class="con">
          <h3>{{item.nickname}}</h3>
          <p>注册： {{item.create_time | formatDate}}</p>
        </div>
      </div>
    </div>
    <div class="none" v-show="noDate">
      <img src="@/assets/kongzhuangtai.png" alt="">
      <p>暂无结果，赶快邀请好友吧</p>
    </div> 
  </div>
</template>
<script type="text/javascript">

import { getMyInvitation } from '@/api/api';
import { formatDate } from '@/util/date'

  export default {
    components: {
    },
    filters:{
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    data () {
      return {
        list: [],
        noDate: false,
      }
    },
    created () {
      this.get_my_invitation()
    },
    methods: {
      onItemClick (index) {
        this.tabIndex = index
      },
      get_my_invitation() {
        this.uid = sessionStorage.getItem('uid');
        getMyInvitation(this.uid).then((res) => {
          if(res.data.info == null){
            this.noDate = true;
            return;
          }
          this.list = res.data.info;
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>  
.my-invite
  background-color #f5f7fa
  min-height 100vh
  .list
    background-color #fff
    .item
      padding 1.5rem 0
      margin 0 1.5rem
      border-bottom 1px solid #e6e6e6
      display flex
      position relative
      &:last-child
        border none
      img
        max-width 5rem
        min-width 5rem
        max-height 5rem
        min-height 5rem
        border-radius 50%
        overflow hidden
        display block
        margin-right 1.5rem
      h3
        line-height 1.6rem
        font-size 1.5rem
        color #333
        font-weight 500
        position absolute
        top 2rem
      p
        color #999
        font-size 1.2rem
        line-height 1.6rem
        position absolute
        bottom 2rem
  .none
    img
      width 21.5rem
      position relative
      left 50%
      margin-left -10.75rem
      padding-top 11.6rem
    p
      color #999
      font-size 1.2rem
      text-align center
      margin-top 4rem
</style>